<template>
  <div class="bf-modal">
    <n-modal
      :show="props.visible"
      title="标题"
      :bordered="false"
      :close-on-esc="false"
      :mask-closable="props.maskClose"
      @mask-click="emits('update:visible', false)"
    >
      <div
        class="modal-box pt-3 pb-3"
        :style="{
          width: isFullScreen ? '100%' : smallWidth,
          height: isFullScreen ? '100%' : smallHeight,
          top: isFullScreen ? '0' : props.top
        }"
      >
        <div class="modal-header pl-5 pr-5 pb-2 flex justify-between">
          {{ props.title }}
          <div class="flex cursor-pointer">
            <BFIcon padding="0" class="mr-1" v-show="!isFullScreen" @click="isFullScreen = !isFullScreen">
              <svg
                t="1679044974432"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6373"
                width="20"
                height="20"
              >
                <path
                  d="M290 236.4l43.9-43.9c4.7-4.7 1.9-12.8-4.7-13.6L169 160c-5.1-0.6-9.5 3.7-8.9 8.9L179 329.1c0.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zM642.7 423.7c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7c4.7 4.7 12.8 1.9 13.6-4.7L863.9 169c0.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6 0.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.4zM845 694.9c-0.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3c-3.1-3.1-8.2-3.1-11.3 0l-42.4 42.3c-3.1 3.1-3.1 8.2 0 11.3L734 787.6l-43.9 43.9c-4.7 4.7-1.9 12.8 4.7 13.6L855 864c5.1 0.6 9.5-3.7 8.9-8.9L845 694.9zM381.3 600.3c-3.1-3.1-8.2-3.1-11.3 0L236.3 733.9l-43.7-43.7c-4.7-4.7-12.8-1.9-13.6 4.7L160.1 855c-0.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-0.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"
                  p-id="6374"
                />
              </svg>
            </BFIcon>
            <BFIcon padding="0" class="mr-1" v-show="isFullScreen" @click="isFullScreen = !isFullScreen">
              <svg
                t="1679046240853"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6513"
                width="20"
                height="20"
              >
                <path
                  d="M391 240.9c-0.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L200 146.3c-3.1-3.1-8.2-3.1-11.3 0l-42.4 42.3c-3.1 3.1-3.1 8.2 0 11.3L280 333.6l-43.9 43.9c-4.7 4.7-1.9 12.8 4.7 13.6L401 410c5.1 0.6 9.5-3.7 8.9-8.9L391 240.9zM401.1 614.1L240.8 633c-6.6 0.8-9.4 8.9-4.7 13.6l43.9 43.9L146.3 824c-3.1 3.1-3.1 8.2 0 11.3l42.4 42.3c3.1 3.1 8.2 3.1 11.3 0L333.7 744l43.7 43.7c4.7 4.7 12.8 1.9 13.6-4.7l18.9-160.1c0.6-5.1-3.7-9.4-8.8-8.8zM622.9 409.9L783.2 391c6.6-0.8 9.4-8.9 4.7-13.6L744 333.6 877.7 200c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.3c-3.1-3.1-8.2-3.1-11.3 0L690.3 279.9l-43.7-43.7c-4.7-4.7-12.8-1.9-13.6 4.7L614.1 401c-0.6 5.2 3.7 9.5 8.8 8.9zM744 690.4l43.9-43.9c4.7-4.7 1.9-12.8-4.7-13.6L623 614c-5.1-0.6-9.5 3.7-8.9 8.9L633 783.1c0.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L824 877.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L744 690.4z"
                  p-id="6514"
                />
              </svg>
            </BFIcon>

            <BFIcon padding="0" @click="emits('update:visible', false)">
              <svg
                t="1679044501272"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5259"
                width="22"
                height="22"
              >
                <path
                  d="M557.312 513.248l265.28-263.904c12.544-12.48 12.608-32.704 0.128-45.248-12.512-12.576-32.704-12.608-45.248-0.128l-265.344 263.936-263.04-263.84C236.64 191.584 216.384 191.52 203.84 204 191.328 216.48 191.296 236.736 203.776 249.28l262.976 263.776L201.6 776.8c-12.544 12.48-12.608 32.704-0.128 45.248 6.24 6.272 14.464 9.44 22.688 9.44 8.16 0 16.32-3.104 22.56-9.312l265.216-263.808 265.44 266.24c6.24 6.272 14.432 9.408 22.656 9.408 8.192 0 16.352-3.136 22.592-9.344 12.512-12.48 12.544-32.704 0.064-45.248L557.312 513.248z"
                  p-id="5260"
                />
              </svg>
            </BFIcon>
          </div>
        </div>
        <div class="modal-body pl-5 pr-5 pt-3 mb-7">
          <slot />
        </div>
        <div class="modal-footer pl-5 pr-5 pb-2 pt-2 flex justify-end">
          <n-button class="mr-3" @click="cancle">{{ props.cancleText }}</n-button>
          <n-button type="primary" @click="ok">
            <n-spin size="small" v-show="loading" />
            {{ props.okText }}
          </n-button>
        </div>
      </div>
    </n-modal>
  </div>
</template>

<script setup lang="ts">
import { NModal, NSpin } from 'naive-ui'
import { Ref, ref } from 'vue'

interface BFModalProps {
  visible: boolean
  title?: string
  width?: string
  height?: string
  top?: string
  maskClose?: boolean
  okText?: string
  cancleText?: string
}
interface BFModalEmits {
  (e: 'update:visible', visible: boolean): void
  (e: 'cancle'): void
  (e: 'ok', loading: Ref<boolean>): void
}

const props = withDefaults(defineProps<BFModalProps>(), {
  width: '50%',
  height: 'auto',
  title: '',
  top: '11%',
  maskClose: true,
  okText: '确认',
  cancleText: '取消'
})
const emits = defineEmits<BFModalEmits>()

let smallWidth = props.width == '100%' ? '50%' : props.width
let smallHeight = props.height == '100%' ? '60%' : props.height

let isFullScreen = ref(false)
const init = () => {
  if (props.width == '100%' && props.height == '100%') {
    isFullScreen.value = true
  }
}
init()

let loading = ref(false)

const cancle = () => {
  emits('update:visible', false)
}

const ok = () => {
  emits('ok', loading)
}
</script>

<style lang="scss">
.modal-box {
  background-color: var(--page-content-bg);
  color: var(--page-color);
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 11%;
  border-radius: 2px;
  transition: width, height, top, 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  .modal-header {
    font-size: 1.2rem;
    border-bottom: solid 1px var(--second-border-color);
  }
  .modal-footer {
    border-top: solid 1px var(--second-border-color);
    width: 100%;
    position: absolute;
    bottom: 0;
  }
}
</style>
